<template>
  <div class="audio-player">
    <div class="player-header">
      <h3 class="player-title">第一回 甄士隐梦幻识通灵</h3>
      <div class="player-status">
        <span class="status-text">已播放 {{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
      </div>
    </div>
    
    <div class="progress-container">
      <div class="time-display">{{ formatTime(currentTime) }}</div>
      <div class="progress-wrapper">
        <a-slider
          v-model:value="progressValue"
          :max="100"
          :tip-formatter="null"
          @change="handleProgressChange"
          class="progress-slider"
        />
      </div>
      <div class="time-display">{{ formatTime(duration) }}</div>
    </div>
    
    <div class="controls-container">
      <div class="main-controls">
        <a-button 
          type="text" 
          size="large"
          class="control-btn"
          @click="skipBackward"
        >
          <SkipBack :size="20" />
        </a-button>
        
        <a-button 
          type="primary"
          size="large" 
          class="play-btn"
          :loading="isLoading"
          @click="togglePlay"
        >
          <Play v-if="!isPlaying" :size="24" />
          <Pause v-else :size="24" />
        </a-button>
        
        <a-button 
          type="text" 
          size="large"
          class="control-btn"
          @click="skipForward"
        >
          <SkipForward :size="20" />
        </a-button>
      </div>
      
      <div class="secondary-controls">
        <a-button 
          type="text" 
          class="control-btn small"
          @click="toggleMute"
        >
          <Volume2 v-if="!isMuted" :size="16" />
          <VolumeX v-else :size="16" />
        </a-button>
        
        <div class="volume-control">
          <a-slider
            v-model:value="volume"
            :max="100"
            :tip-formatter="null"
            @change="handleVolumeChange"
            class="volume-slider"
          />
        </div>
        
        <a-dropdown placement="topRight">
          <a-button type="text" class="control-btn small">
            <Settings :size="16" />
          </a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item key="0.5x" @click="setPlaybackRate(0.5)">
                <span :class="{ 'active-rate': playbackRate === 0.5 }">0.5x</span>
              </a-menu-item>
              <a-menu-item key="0.75x" @click="setPlaybackRate(0.75)">
                <span :class="{ 'active-rate': playbackRate === 0.75 }">0.75x</span>
              </a-menu-item>
              <a-menu-item key="1x" @click="setPlaybackRate(1)">
                <span :class="{ 'active-rate': playbackRate === 1 }">1.0x</span>
              </a-menu-item>
              <a-menu-item key="1.25x" @click="setPlaybackRate(1.25)">
                <span :class="{ 'active-rate': playbackRate === 1.25 }">1.25x</span>
              </a-menu-item>
              <a-menu-item key="1.5x" @click="setPlaybackRate(1.5)">
                <span :class="{ 'active-rate': playbackRate === 1.5 }">1.5x</span>
              </a-menu-item>
              <a-menu-item key="2x" @click="setPlaybackRate(2)">
                <span :class="{ 'active-rate': playbackRate === 2 }">2.0x</span>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Settings } from 'lucide-vue-next'

interface Props {
  audioUrl?: string
  title?: string
}

interface Emits {
  play: []
  pause: []
  timeUpdate: [currentTime: number]
  ended: []
}

const props = withDefaults(defineProps<Props>(), {
  title: '第一回 甄士隐梦幻识通灵'
})

const emit = defineEmits<Emits>()

const isPlaying = ref(false)
const isLoading = ref(false)
const isMuted = ref(false)
const currentTime = ref(12.5 * 60) // 12分30秒
const duration = ref(45.35 * 60) // 45分21秒
const volume = ref(80)
const playbackRate = ref(1)

const progressValue = computed({
  get: () => {
    if (duration.value === 0) return 0
    return (currentTime.value / duration.value) * 100
  },
  set: (value: number) => {
    currentTime.value = (value / 100) * duration.value
  }
})

let audioUpdateInterval: number | null = null

const togglePlay = async () => {
  if (isPlaying.value) {
    pause()
  } else {
    await play()
  }
}

const play = async () => {
  isLoading.value = true
  
  // 模拟加载延迟
  await new Promise(resolve => setTimeout(resolve, 500))
  
  isPlaying.value = true
  isLoading.value = false
  emit('play')
  
  // 开始更新时间
  startTimeUpdate()
}

const pause = () => {
  isPlaying.value = false
  emit('pause')
  stopTimeUpdate()
}

const skipBackward = () => {
  currentTime.value = Math.max(0, currentTime.value - 15)
  emit('timeUpdate', currentTime.value)
}

const skipForward = () => {
  currentTime.value = Math.min(duration.value, currentTime.value + 15)
  emit('timeUpdate', currentTime.value)
}

const handleProgressChange = (value: number) => {
  currentTime.value = (value / 100) * duration.value
  emit('timeUpdate', currentTime.value)
}

const toggleMute = () => {
  isMuted.value = !isMuted.value
}

const handleVolumeChange = (value: number) => {
  volume.value = value
  if (value > 0) {
    isMuted.value = false
  }
}

const setPlaybackRate = (rate: number) => {
  playbackRate.value = rate
}

const startTimeUpdate = () => {
  if (audioUpdateInterval) return
  
  audioUpdateInterval = window.setInterval(() => {
    if (isPlaying.value) {
      currentTime.value += 1
      emit('timeUpdate', currentTime.value)
      
      if (currentTime.value >= duration.value) {
        currentTime.value = duration.value
        pause()
        emit('ended')
      }
    }
  }, 1000)
}

const stopTimeUpdate = () => {
  if (audioUpdateInterval) {
    clearInterval(audioUpdateInterval)
    audioUpdateInterval = null
  }
}

const formatTime = (seconds: number): string => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

onMounted(() => {
  // 组件挂载时的初始化
})

onUnmounted(() => {
  stopTimeUpdate()
})
</script>

<style scoped>
.audio-player {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.player-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.player-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-text {
  font-size: 12px;
  color: #6b7280;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.time-display {
  font-size: 12px;
  color: #6b7280;
  font-family: 'Monaco', 'Menlo', monospace;
  min-width: 40px;
  text-align: center;
}

.progress-wrapper {
  flex: 1;
}

.progress-slider {
  margin: 0 !important;
}

.progress-slider :deep(.ant-slider-rail) {
  background: #e5e7eb;
  height: 6px;
}

.progress-slider :deep(.ant-slider-track) {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  height: 6px;
}

.progress-slider :deep(.ant-slider-handle) {
  border: 2px solid #6366f1;
  width: 16px;
  height: 16px;
  margin-top: -5px;
}

.progress-slider :deep(.ant-slider-handle:hover) {
  border-color: #4f46e5;
}

.controls-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.control-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.control-btn:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366f1 !important;
}

.control-btn.small {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

.play-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.play-btn:hover {
  background: linear-gradient(135deg, #5b5bd6, #7c3aed) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4) !important;
}

.play-btn:active {
  transform: scale(0.98) !important;
}

.secondary-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.volume-control {
  width: 80px;
}

.volume-slider {
  margin: 0 !important;
}

.volume-slider :deep(.ant-slider-rail) {
  background: #e5e7eb;
  height: 4px;
}

.volume-slider :deep(.ant-slider-track) {
  background: #6366f1;
  height: 4px;
}

.volume-slider :deep(.ant-slider-handle) {
  border: 2px solid #6366f1;
  width: 12px;
  height: 12px;
  margin-top: -4px;
}

.active-rate {
  color: #6366f1;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .audio-player {
    padding: 16px;
  }
  
  .player-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .controls-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .secondary-controls {
    width: 100%;
    justify-content: center;
  }
  
  .volume-control {
    width: 100px;
  }
}
</style>